<template>
	<div class="kp-login">
		<header class="login_header">
			<div class="login_text">
				<span class="login_span" @click="filmReturn"></span>
				<div class="login_kp">快票出行欢迎您</div>
			</div>
		</header>
		<div class="login_tab">
			<ul class="wccy-after login_ul">
				<li class="login_ks" :class="num == 0?'active_li':''" @click="tab(0)">快速登录</li>
				<li class="login_zh" :class="num == 1?'active_li':''" @click="tab(1)">账号登录</li>
			</ul>
			<div class="login_dl">
				<div class="login_speed" v-if="num == 0">
					<div class="input_login">
						<input type="text" v-model="tel" placeholder="手机号码" maxlength="11" @input="inputlogin" /><span class="input_span" v-show="isLogin" @click="dellogin"></span>
					</div>
					<div class="input_login">
						<input type="text" v-model="card" placeholder="短信验证码" @input="inputlogin" />
						<span class="input_ver" v-if="is_card">{{yzms}}</span>
						<span class="input_ver" v-else @click="cardPost">{{yzms}}</span>
					</div>
					<!--<input type="button" @click="submitLogin" value="登录" class="inp_sub"/>-->
					<div class="inp_sub inp_gray tc" v-if="isLred">登录</div>
					<div class="inp_sub tc" v-else @click="submitLogin">登录</div>
				</div>
				<div class="login_speed" v-else>
					<form>
						<div class="input_login">
							<input type="text" name="" v-model="telt" placeholder="手机号码" @input="inputband" maxlength="11" /><span class="input_span" v-show="isdel" @click="teldel"></span>
						</div>
						<div class="input_login" v-if="isPass">
							<input type="password" name="" placeholder="输入密码，8-14位字母或数字" maxlength="14" v-model="pass" @input="inputband" />
							<span class="input_bukj" @click="xs"></span>
						</div>
						<div class="input_login" v-else>
							<input type="text" name="" placeholder="输入密码，8-14位字母或数字" maxlength="14" v-model="pass" @input="inputband" />
							<span class="input_mm" @click="xs"></span>
						</div>
						<div class="forgetPass">
							<router-link to="/forgetpass"><span class="for_span">忘记密码</span></router-link>
						</div>
						<div class="inp_su inp_gray tc" v-if="isRedist">登录</div>
						<div class="inp_su tc" v-else @click="passlogin">登录</div>
					</form>
				</div>
			</div>
			<div class="login_bot" v-if="false">
				<div class="login_t"><span>第三方登录</span></div>
				<ul class="wccy-after icon_ul">
					<li><img src="../../assets/qq.png" /></li>
					<li class="ul_mar"><img src="../../assets/weixin.png" /></li>
					<li><img src="../../assets/weibo.png" /></li>
				</ul>
			</div>
		</div>
		<div class="new_regis wccy-after">
			<router-link to="/register"><span class="new_news">新用户注册入口<em class="new_icon"></em></span></router-link>
		</div>
	</div>
</template>

<script>
	import hex_md5 from "../../public/md5"
	export default {
		data() {
			return {
				num: 0,
				card: "",
				tel: "",
				i: 60,
				yzms: "获取验证码",
				is_card: false,
				telt: '',
				isdel: false, //删除手机号
				isPass: true, //是否显示密码
				pass: '',
				isRedist: true, //是否注册登录
				isLogin: false,
				isLred: true
			}
		},
		mounted() {
			//载入后执行
//			console.log(hex_md5.hex_md5)
		},
		methods: {
			//方法放置
			xs() {
				this.isPass = !this.isPass
			},
			tab(num) {
				this.num = num;
			},
			submitLogin() { //登陆
				let params = {
					phone: this.tel,
					smsCode: this.card,
					os: "",
					channels: 4,
					model: "",
					wxCodeLogin: 'wxApplet',
				};
				var that = this;
				this.$http.post(
					this.$baseUrl.baseurl + "kpcx/dynamicLoginForApp",
//					this.$baseUrl.baseurl + "KPCX/app/newLogin/dynamicLogin",
					params
				).then((res) => {
					if(res.data.Code == 0) {
						var userinfo = res.data.Result.appuser;
						if(res.data.Result.appuser) {
							that.$store.commit('USERINFO', userinfo);
							if(res.data.Result.appuser.IDNo) {
								userinfo.realnamestatus = true;
								that.$store.commit('USERINFO', userinfo);
							} else {
								userinfo.realnamestatus = false;
								that.$store.commit('USERINFO', userinfo);
							}
							that.$router.go(-1);
						} else {
							that.$toast('用户信息不存在');
						}
					} else {
						that.$toast(res.data.msg);
					}
				}).catch((err) => {
					console.log(err);
				});
			},
			cardPost() { //获取验证码
				//验证码发送
				var regs = 11 && /^((13|14|15|17|18|16|19)[0-9]{1}\d{8})$/;
				if(this.tel == "") {
					this.$toast('手机号不能为空')
					return false;
				} else if(!regs.test(this.tel)) {
					this.$toast('请输入正确的手机号')
					return false;
				} else {
					this.is_card = true;
					let time = window.setInterval(() => {
						this.yzms = "(" + (this.i--) + ")秒后重新发送";
						if(this.i == -1) {
							window.clearInterval(time);
							this.is_card = false;
							this.yzms = "获取验证码";
							this.i = 60;
						}
					}, 1000)
					let params = {
						phone: this.tel,
						type: 'login'
					}
					let that = this;
					this.$http.post(
						this.$baseUrl.baseurl + 'kpcx/sendMsg',
//						this.$baseUrl.baseurl + 'KPCX/app/newLogin/sendMsg',
						params
					).then(function(res) {
						let {
								data,
								code,
								msg
							} = res.data;
						if(res.data.Code == 0){
							
						}else if(res.data.Code == 1){
							that.banner = res.data.data;
						}else{
							that.$toast(res.data.msg);
							window.clearInterval(time);
							this.yzms = "获取验证码";
							this.is_card = false;
							this.i = 60;
						}
						
					}).catch(error => {

					});
				}
			},
			filmReturn() {
				this.$router.go(-1)
			},
			getcon() {
				if(this.$route.query.pass == "regist") {
					this.num = 1;
				} else {
					this.num = 0;
				}

			},
			inputband() {
				if(this.telt != '') {
					this.isdel = true;
				} else {
					this.isdel = false;
				}
				if(this.telt != '' && this.pass != '') {
					this.isRedist = false;
				} else {
					this.isRedist = true;
				}
			},
			inputlogin() {
				if(this.tel != '') {
					this.isLogin = true;
				} else {
					this.isLogin = false;
				}
				if(this.tel != '' && this.card != '') {
					this.isLred = false;
				} else {
					this.isLred = true;
				}
			},
			passlogin() {
//				console.log(hex_md5.hex_md5(this.pass))
				let that = this;
				let param = {
					"phone": this.telt,
					"passWord": hex_md5.hex_md5(this.pass),
//					"passWord": this.pass,
					"wxCodeLogin": 'wxApplet',
				}
				this.$http.post(
					this.$baseUrl.baseurl + 'kpcx/loginForApp',
					param
				).then(function(res) {
//					console.log(res)
					if(res.data.Code == 0) {
						var userinfo = res.data.Result.appuser;
//						console.log(userinfo)
						that.$store.commit('USERINFO', userinfo);
						if(res.data.Result.appuser.IDNo) {
							userinfo.realnamestatus = true;
							that.$store.commit('USERINFO', userinfo);
						} else {
							userinfo.realnamestatus = false;
							that.$store.commit('USERINFO', userinfo);
						}
						if(that.$route.query.pass == "regist") {
							that.$router.push({
								path: '/',
							})
						} else {
							that.$router.go(-1);
						}

					} else {
						that.$toast(res.data.msg);
					}

				}).catch(error => {

				});
			},
			teldel() { //手机号删除
				this.telt = '';
				this.isdel = false;
				if(this.telt != '' && this.pass != '') {
					this.isRedist = false;
				} else {
					this.isRedist = true;
				}
			},
			dellogin() {
				this.tel = '';
				this.isLogin = false;
				if(this.tel != '' && this.card != '') {
					this.isLred = false;
				} else {
					this.isLred = true;
				}
			}
		},
		created() {
			//创建后
			this.getcon();
		},
		watch: {
			//监听放置
			'$route': 'getcon'
		},
		components: {

		},
		computed: {}
	};
</script>

<style>
	.kp-login {
		height: 100vh;
		background: #fff;
	}
	
	.login_header {
		height: 99px;
	}
	
	.login_text {
		display: -webkit-box;
		display: flex;
	}
	
	.login_span {
		display: inline-block;
		width: 36px;
		height: 36px;
		background: url("../../assets/fanhui.png") 0 0;
		background-size: cover;
		margin: 31px 182px 0 30px;
	}
	
	.login_kp {
		-webkit-box-flex: 1;
		flex: 1;
		margin: 31px 0 0 0;
		height: 32px;
		width: 228px;
		font-size: 32px;
		letter-spacing: 1px;
		font-family: "MicrosoftYaHei";
	}
	
	.login_tab {}
	
	.login_ul {
		height: 88px;
		width: 100%;
		border-bottom: 1px solid rgba(183, 183, 183, 0.3);
		padding: 0 30.5px;
		box-sizing: border-box;
	}
	
	.login_ul>li {
		float: left;
		width: 344px;
		color: rgb(51, 51, 51);
		font-size: 34px;
		height: 88px;
		line-height: 88px;
		text-align: center;
		font-family: "MicrosoftYaHeiLight";
	}
	
	.login_ul>li.active_li {
		color: rgb(34, 34, 34);
		position: relative;
		font-family: "MicrosoftYaHei";
	}
	
	.login_ul>li.active_li::after {
		content: "";
		width: 212px;
		height: 3px;
		background-color: rgb(59, 195, 194);
		position: absolute;
		left: 50%;
		bottom: 2px;
		margin-left: -106px;
	}
	
	.login_speed {
		padding: 0 28px;
	}
	
	.input_login {
		width: 690px;
		height: 110px;
		padding: 30px 0;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(183, 183, 183, 0.3);
		position: relative;
		display: -webkit-flex;
		display: flex;
	}
	
	.input_login>input {
		border: none;
		outline: none;
		font-size: 32px;
		font-family: "MicrosoftYaHeiLight";
		width: 100%;
		flex: 1;
		-webkit-box-flex: 1;
		height: 42px;
		line-height: 42px;
		letter-spacing: 0;
	}
	
	.input_login>input::-webkit-input-placeholder {
		color: rgb(138, 138, 138);
	}
	/*//.input_span{display:inline-block;width:28px;height:28px;position:absolute;right:0;top:50%;margin-top:-14px;background:url("../../assets/qingchu.png") 0 0 no-repeat;background-size:cover;}*/
	
	.input_span {
		display: inline-block;
		width: 28px;
		height: 30px;
		margin-top: 7px;
		background: url("../../assets/qingchu.png") 0 0 no-repeat;
		background-size: cover;
	}
	
	.input_ver {
		font-size: 32px;
		color: rgb(59, 195, 194);
		height: 42px;
		line-height: 42px;
	}
	
	.inp_sub {
		border: none;
		background: rgb(59, 195, 194);
		width: 679px;
		height: 80px;
		border-radius: 40px;
		color: #fff;
		font-size: 36px;
		outline: none;
		margin: 122px 5px 0;
		line-height: 80px;
	}
	
	.inp_su {
		border: none;
		background: rgb(59, 195, 194);
		width: 679px;
		height: 80px;
		border-radius: 40px;
		color: #fff;
		font-size: 36px;
		outline: none;
		margin: 0px 5px 0;
		line-height: 80px;
	}
	
	.login_bot {
		padding: 0 95px;
		margin-top: 94px;
	}
	
	.login_t {
		position: relative;
	}
	
	.login_t::before,
	.login_t::after {
		content: "";
		width: 150px;
		height: 2px;
		background: rgb(102, 102, 102);
		position: absolute;
		top: 50%;
		margin-top: -1px;
	}
	
	.login_t::before {
		left: 0;
	}
	
	.login_t::after {
		right: 0;
	}
	
	.login_t>em {
		display: inline-block;
		width: 150px;
		height: 2px;
		background: rgb(102, 102, 102);
	}
	
	.login_t>span {
		font-size: 30px;
		color: rgb(102, 102, 102);
		display: block;
		text-align: center;
	}
	
	.icon_ul {
		margin: 69px 50px 0;
	}
	
	.icon_ul>li {
		float: left;
		display: inline-block;
		display: inline-block;
		width: 88px;
		height: 88px;
	}
	
	.icon_ul>li>img {
		width: 88px;
		height: 88px;
	}
	
	.ul_mar {
		margin: 0 95px;
	}
	
	.input_mm {
		display: inline-block;
		width: 44px;
		height: 28px;
		margin-top: 7px;
		background: url("../../assets/kejian.png") 0 0 no-repeat;
		background-size: cover;
	}
	
	.inp_gray {
		background: rgb(216, 216, 216);
	}
	
	.new_regis {
		position: fixed;
		bottom: 50px;
		width: 100%;
	}
	
	.new_news {
		font-size: 30px;
		color: rgb(59, 195, 194);
		letter-spacing: 0;
		font-family: "MicrosoftYaHei";
		line-height: 28px;
		display: block;
		height: 28px;
		width: 250px;
		margin: 0 auto;
	}
	
	.new_icon {
		display: inline-block;
		width: 16px;
		height: 28px;
		background: url("../../assets/jiantou_you.png") 0 0 no-repeat;
		background-size: cover;
		margin-left: 15px;
		vertical-align: top;
	}
	
	.forgetPass {
		width: 100%;
		text-align: right;
		display: inline-block;
		margin: 42px 0 52px;
		color: rgb(59, 195, 194);
		font-size: 28px;
	}
	
	.forgetPass .for_span {
		color: rgb(59, 195, 194);
		font-size: 28px;
	}
	
	.input_spankj {
		display: inline-block;
		width: 44px;
		height: 30px;
		margin-top: 7px;
		background: url("../../assets/bukejian.png") 0 0 no-repeat;
		background-size: cover;
	}
	.input_bukj {
		display: inline-block;
		width: 46px;
		height: 30px;
		margin-top: 7px;
		background: url("../../assets/bukejian.png") 0 0 no-repeat;
		background-size: cover;
	}
</style>